<template>
  <div>
    <div>
      <h2>人物1</h2>
      <p>姓名: {{ fullName }}</p>
      firstName: <input type="text" v-model="firstName" /> lastName:
      <input type="text" v-model="lastName" />
    </div>
    <div>
        <h2>人物2</h2>
        <p>姓名: {{people}}</p>
        <p>一个input框，输入内容之后，根据第一个空格分割，前面作为firstName，后面作为lastName,如果没有空格lastName为""</p>
        <input/>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    let firstName = ref("Hydra");
    let lastName = ref("Feng");

    // computed传入一个函数，作为getter只能获取值，不能设置值
    let fullName = computed(() => firstName.value + " " + lastName.value);

    return { fullName, firstName, lastName,people };
  },
};
</script>

<style>
</style>